<template>
    <el-form>
        <el-form-item label="社团选择">
            <club-select v-model:data="club"></club-select>
        </el-form-item>
    </el-form>
    <transition name="el-fade-in">
        <template v-if="club">
            <el-space
                alignment="left"
                style="width: 100%"
                direction="vertical"
            >
                <club-form v-model:data="club" :favicon-data="club.favicon" :disabled="updateLoading"></club-form>
                <el-button-group>
                  <el-button type="primary" @click="update" :loading="updateLoading">更新</el-button>
                </el-button-group>
            </el-space>
        </template>
    </transition>
</template>

<script lang="ts">
import ClubForm from "@/components/admin/ClubForm.vue";
import ClubSelect from "@/components/admin/ClubSelect.vue";
import { IClubModel } from "@/headers/admin/model.h";
import { useAdminStore } from "@/store/admin";
import { useLoadingStatus } from "@/utils";
import {defineComponent, ref, unref, watch,onUnmounted} from "vue";
import { useRouter} from "vue-router";
import {GetClubAction, UpdateClubAction} from "@/store/admin/actions/club";
import {ElMessage} from "element-plus";
import {IUpdateClubReq} from "@/headers/admin/reqs.h";
function getClubID(clubID:any) {
  if(!clubID)return null;
  if(typeof clubID === 'number')return clubID;
  const nId = parseFloat(clubID);
  if(isNaN(nId))return  null;
  return nId;
}
export default defineComponent({
    components: {
        ClubSelect,
        ClubForm,
    },
    setup() {
        const router = useRouter();
        const store = useAdminStore();
        const club = ref<IClubModel | null>(null);
        const unWatch = watch(router.currentRoute,(route)=>{
          if(route.query?.["club_id"] ) {
            const clubID =getClubID(route.query['club_id'])!;
            if(isNaN(clubID)){
              ElMessage.info({type:"info",message:"无效的参数"});
            } else {
              GetClubAction.getInstance().call(store,{club_id:clubID}).then((res)=>{
                club.value = res;
              })

            }
          }
        },{immediate:true});
      onUnmounted(()=>{
        unWatch();
      })

        const {loadingFunc:update,loading:updateLoading} = useLoadingStatus(async function() {
          const currentClub = unref(club);
          if(!currentClub){
            return
          }
          const updateReq:IUpdateClubReq = {
            club_id:currentClub.id,
            name:currentClub.name,
            location:currentClub.location,
            introduction:currentClub.introduction,
            address:currentClub.address,
            primary_color:currentClub.primary_color,
            favicon_id:(currentClub as any).favicon_id??currentClub.favicon?.id??0,
            ...currentClub.page?{page_id:currentClub.page.id}:{},
          }
          await UpdateClubAction.getInstance().call(store,updateReq)
          ElMessage.success({
            type:"success",
            message:"更新成功"
          })
        })
        return {
            club,
            update,
            updateLoading
        };
    },
});
</script>
